<!--安监预警组件模板-->
<template>
    <el-scrollbar max-height="380px" height="380px">
        <div v-for="(r, idx) in listData" :key="idx" class="warnTemplate">
            <ul>
                <li v-for="(item, index) in r.list" :key="index">
                    <div class="borders" :style="{ background: index ? '#0e96ff' : 'red' }"></div>
                    <span>{{ item.name }}：</span>
                    <span :style="{ color: index ? '#FFF' : 'red' }">
                        {{ index ? item.value : item.value + 'mPa' }}
                    </span>
                </li>
            </ul>
            <div class="tip">
                <p>{{ r.tip }}</p>
            </div>
        </div>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
    listData: {
        list: Array<any>;
        tip: string;
    }[];
}

const props = withDefaults(defineProps<Props>(), {
    /** 预警数据，必须是二维数组
     *  {
     *     list:[{name:'',value:''}],
     *     tip:''
     *   }
     *
     *  -list 渲染数据
     *  -tip 标识
     */
    listData: () => [
        {
            list: [
                { name: '压力', value: 1.5 },
                { name: '事件类型', value: '超高报' },
                { name: '风险级别', value: '潜在风险' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未完成'
        },
        {
            list: [
                { name: '压力', value: 1.5 },
                { name: '事件类型', value: '超高报' },
                { name: '风险级别', value: '潜在风险' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未完成'
        },
        {
            list: [
                { name: '压力', value: 1.5 },
                { name: '事件类型', value: '超高报' },
                { name: '风险级别', value: '潜在风险' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未完成'
        },
        {
            list: [
                { name: '压力', value: 1.5 },
                { name: '事件类型', value: '超高报' },
                { name: '风险级别', value: '潜在风险' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未完成'
        },
        {
            list: [
                { name: '压力', value: 1.5 },
                { name: '事件类型', value: '超高报' },
                { name: '风险级别', value: '潜在风险' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未完成'
        }
    ]
});
</script>

<style lang="scss" scoped>
.warnTemplate {
    padding: 24px 15px;
    box-sizing: border-box;
    background: rgba(27, 54, 77, 0.8);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    &:last-of-type {
        margin-bottom: 0;
    }
    .tip {
        color: #294258;
        background: #fbce05;
        position: absolute;
        right: -36px;
        top: 10px;
        font-size: 12px;
        transform: rotateZ(45deg);
        width: 108px;
        text-align: center;
        padding: 1px 0;
    }
    ul {
        li {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            .borders {
                width: 3px;
                height: 11px;
                background: #0e96ff;
                border-radius: 2px;
                margin-right: 12px;
            }
            &:last-of-type {
                margin-bottom: 0;
            }
            span {
                font-size: 14px;
                &:first-of-type {
                    @include fontCustomStyle(#b6b5b5, 14px);
                }
            }
        }
    }
}
</style>
